<template>
    <basic-container>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-setting"></i> 部门区域管理</el-breadcrumb-item>
                <el-breadcrumb-item><i class="el-icon-date"></i> 修改</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <avue-form ref="form" v-model="form" :option="option" @reset-change="emptyChange" @submit="submit">
            <template
                    slot="areaSns"
                    slot-scope="scope">
                <el-tree
                        ref="areaTree"
                        v-model="areaSnList"
                        :data="areaTreeData"
                        :props="areaProps"
                        :default-checked-keys="areaSnList"
                        :default-expanded-keys="areaSnList"
                        :check-strictly="false"
                        node-key="areaSn"
                        highlight-current
                        show-checkbox
                        placeholder="请选择区域"/>
            </template>
            <template slot-scope="scope" slot="menuForm">
                <el-button @click="goBack">返回</el-button>
            </template>
        </avue-form>
    </basic-container>
</template>

<script>
    import {fetchDeptArea, editDeptArea} from '@/api/crm/dept_area';
    import {formOption} from '@/const/crud/crm/form_option/dept_area';
    import {areaTree} from '@/api/crm/area';

    export default {
        data() {
            return {
                form: {},
                role: [],
                areaSnList: [],
                option: formOption,
                areaTreeData: [],
                areaProps: {
                    label: 'areaName',
                    value: 'areaSn'
                }
            }
        },
        computed: {},
        mounted() {

        },
        created() {
            let deptId = JSON.parse(this.$route.query.res).deptId;
            fetchDeptArea(deptId).then(response => {
                this.form = response.data.data;
                this.areaSnList = this.form.areaSnList;
                this.fetchAreaTree();
            })
        },
        methods: {
            fetchAreaTree() {
                areaTree().then(response => {
                    this.areaTreeData = response.data.data;
                });
            },
            emptyChange() {
                this.form = {};
            },
            submit() {
                let params = {
                    areaSnList: this.$refs.areaTree.getCheckedKeys(),
                    deptId: this.form.deptId,
                };
                editDeptArea(Object.assign({}, params)).then(response => {
                    if (response.data.code === 0) {
                        this.$message.success('修改成功')
                        this.goBack();
                    } else {
                        this.$message.success(response.data.msg)
                    }
                })
            },
            goBack(time = 1000) {
                let that = this;
                setTimeout(function () {
                    that.$store.commit('DEL_ONE_TAG', that.$route);
                    that.$router.go(-1);
                }, time);
            }
        }
    }
</script>

<style scoped lang="scss">
    .crumbs {
        margin: 20px 10px;
    }
</style>


